<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环遍历语法</title>
	</head>
	<body>
		<div id="app">
			<h1>vue-for循环遍历</h1>
			<!-- 直接循环遍历数据-不带下标 -->
			<h2 v-for="item in names">{{item}}</h2>
			
			<!-- 直接循环遍历数据-带下标 -->
			<h2 v-for="(item,index) in names">{{index+1}}.{{item}}</h2>
			
			<hr >
			<!-- 循环遍历单个对象 直接获取数据 -->
			<h2 v-for="value in userInfo">{{value}}</h2>
			<!-- 循环遍历单个对象 获取key-value格式-->
			<h2 v-for="(value,key) in userInfo">{{key}}-{{value}}</h2>
			<!-- 循环遍历单个对象 获取key-value格式 和下标-->
			<h2 v-for="(value,key,index) in userInfo">{{index}}-{{key}}-{{value}}</h2>
			<hr >
			<!-- 循环遍历多个对象 -->
			<ul v-for="user in users">
				<li>{{user.id}}</li>
				<li>{{user.name}}</li>
				<li>{{user.age}}</li>
			</ul>
		</div>
		
		
		<script src="../js/vue.min.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				
				el : "#app",
				data : {
					names: ["张三","老四","王五"],
					userInfo: {id:100,name:"天王盖地虎",age:30},
					users : [
						{id:1,name:"tomcat猫",age:18},
						{id:2,name:"Dog",age:17},
						{id:2,name:"宠物大战",age:16}
					]
				}
			}) 
		</script>
	</body>
</html>
